<!--
 * @Author: H.
 * @Date: 2021-11-29 18:57:18
 * @LastEditTime: 2021-12-08 10:35:27
 * @Description:
-->
<template>
  <div class="login-left">
    <img
      src="../../../assets/svg/login-box-bg.svg"
      class="login-img login-left1"
    />

    <span class="login-info1 login-left2">开箱即用的后台管理系统</span>

    <span class="login-info2 login-left3">输入您的个人信息开始使用</span>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style lang="scss" scoped>
.login-left {
  display: flex;
  flex-direction: column;
  img {
    width: 70%;
  }
  .login-info1 {
    font-size: 30px;
    margin-top: 2em;
    color: #fff;
  }
  .login-info2 {
    font-size: 14px;
    margin-top: 20px;
    color: #fff;
  }
  .login-left1 {
    animation: inputLeft 0.5s;
  }
  .login-left2 {
    animation: inputLeft 0.8s;
  }
  .login-left3 {
    animation: inputLeft 1.1s;
  }
  @keyframes inputLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>
